<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">  -->
  <meta name="viewport"
        content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <script
          src="http://hz-huibenxia-test.oss-cn-shenzhen.aliyuncs.com/static-resource/js/jquery/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css"
        href="http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/static-resource/js/book/bookblock.css" />
  <script>
    setTimeout(() => {
      const windowHeight = screen.availHeight
      document.getElementsByTagName('html')[0].style.fontSize = windowHeight / 360 * 16 * (16 / parseFloat(
              getComputedStyle(window.document.documentElement)["font-size"])) + 'px'
    }, 0)

    //获取deviceUuid
    const str = getQuery('deviceUuid')
    //是否为小程序
    const isMp = getQuery('containerType') === "mp"
    function getQuery(name) {
      const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
      const r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    }
    if (isMp || !str || /^[0-9]+$/.test(str)) {
      script_title = "https://hz-huibenxia-test.oss-cn-shenzhen.aliyuncs.com/static-resource/js/"
      window.prompt = function name(params) { }
    } else {
      script_title = "http://load/static-resource/js/"
    }
    const scriptArr = [
      "util/util.js",
      "book/modernizr.custom.js",
      "third-part/cordova/cordova.js",
      "plugin/build-config.js",
      "feature/cordova/cordova-file.js",
      "feature/cordova/cordova-plugin.js",
      "feature/file.js",
      "feature/media-record.js",
      "feature/weixin.js",
      "feature/wxpay.js",
      "feature/load.js",
      "book/jquery.bookblock.js"
    ]
    loadJs(scriptArr, script_title, () => {
      console.log("加载完成")
    })
    function loadJs(JsList, title, onLoad) {
      let index = 0
      let load = function (js, title) {
        index++
        let script = document.createElement("script")
        script.src = title + js
        script.onload = function () {
          if (index < JsList.length) {
            load(JsList[index], title)
          } else {
            if (onLoad) {
              onLoad()
            }
          }
        }
        document.getElementsByTagName('head')[0].appendChild(script)
      }
      load(JsList[index], title)
    }
  </script>
  <title>huibenxiav3</title>
  <style>
    .inner-index-progress {
      position: fixed;
      right: 0rem;
      bottom: 0rem;
      padding: 1.8rem;
    }

    .inner-index-progress-text {
      display: flex;
      justify-content: flex-end;
    }

    .inner-index-progress-word {
      background-image: url(https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/index/progress-word.png);
      width: 2.8rem;
      height: 1.2rem;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .inner-index-progress-point {
      background-image: url(https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/index/progress-point.png);
      width: 1.8rem;
      height: 1rem;
      background-size: 1.6rem;
      background-repeat: no-repeat;
      background-position: 80% 80%;
      position: relative;
    }

    .inner-index-progress-point-placeholder {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0rem;
      right: 0rem;
    }

    .inner-index-progress-container {
      width: 10rem;
      height: 0.6rem;
      background-color: #e5e5e5;
      border-radius: 1rem;
      overflow: hidden;
    }

    .inner-index-progress-bar {
      width: 100%;
      height: 100%;
      background-image: linear-gradient(#febc94, #ff9e82);
      border-radius: 1rem;
      will-change: width;
      transition: width 0.2s;
    }
  </style>
</head>

<body>
<div id="app">
  <div class="inner-index-progress">
    <div class="inner-index-progress-text">
      <div class="inner-index-progress-word"></div>
      <div class="inner-index-progress-point">
        <div class="inner-index-progress-point-placeholder"></div>
      </div>
    </div>
    <div class="inner-index-progress-container">
      <div class="inner-index-progress-bar"></div>
    </div>
  </div>

</div>
</body>

</html>
